<template>
  <div class="container">
    <!-- 头部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>广告</el-breadcrumb-item>
      <el-breadcrumb-item>添加广告</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-form
        :model="addAdvContentForm"
        :rules="addAdvContentFormRules"
        ref="addAdvContentFormRef"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="选择广告位" prop="advid">
          <el-select v-model="addAdvContentForm.advid">
            <el-option
              v-for="item in advList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片" prop="path">
          <el-upload
            name="image"
            :action="uploadURL"
            :headers="headerObj"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAdvContent">添加广告</el-button>
          <el-button @click="$router.push('/home/adv/content')">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdvContentAdd',
  data() {
    return {
      // 图片上传路径
      uploadURL: this.baseURL + 'admin/upload',
      // 上传图片请求头对象
      headerObj: {
        Token: sessionStorage.getItem('token')
      },
      // 广告位列表
      advList: [],
      // 添加广告位表单数据对象
      addAdvContentForm: {
        advid: '',
        path: []
      },
      // 添加广告位表单验证规则对象
      addAdvContentFormRules: {
        advid: [{ required: true, message: '请选择广告位', trigger: 'change' }],
        path: [{ required: true, message: '请选择广告位', trigger: 'change' }]
      }
    }
  },
  created() {
    // 获取分类列表
    this.getAdvList()
  },
  methods: {
    // 获取广告位列表
    async getAdvList() {
      const { data: res } = await this.$http.get('/admin/adv')
      this.advList = res.data
    },
    // 图片上传成功回调
    handleSuccess(res) {
      this.addAdvContentForm.path.push(res.name)
    },
    // 图片删除回调
    handleRemove({ response }) {
      this.addAdvContentForm.path = this.addAdvContentForm.path.filter(
        item => item !== response.name
      )
    },
    // 添加广告位内容
    addAdvContent() {
      this.$refs.addAdvContentFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/admin/advcontent', {
          ...this.addAdvContentForm,
          path: this.addAdvContentForm.path.join('|')
        })
        if (res.status !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        // 跳转到列表页
        this.$router.push('/home/adv/content')
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-upload-list__item-thumbnail {
  object-fit: cover;
}
</style>
